<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生产记录 - MES系统</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <!-- Header -->
        <header class="header">
            <h1><i class="fas fa-cogs"></i> 生产记录管理</h1>
            <div class="user-info">
                <span id="currentTime"></span>
                <a href="index.html" class="btn btn-secondary">
                    <i class="fas fa-home"></i> 返回主页
                </a>
            </div>
        </header>

        <!-- Navigation -->
        <nav class="sidebar">
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="dashboard.html">
                        <i class="fas fa-tachometer-alt"></i>
                        <span>仪表盘</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="products.html">
                        <i class="fas fa-box"></i>
                        <span>产品管理</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="workorders.html">
                        <i class="fas fa-clipboard-list"></i>
                        <span>工单管理</span>
                    </a>
                </li>
                <li class="nav-item active">
                    <i class="fas fa-cogs"></i>
                    <span>生产记录</span>
                </li>
            </ul>
        </nav>

        <!-- Main Content -->
        <main class="main-content">
            <div class="page-header">
                <h2>生产记录管理</h2>
                <div class="header-actions">
                    <button class="btn btn-success" onclick="showAddProductionModal()">
                        <i class="fas fa-plus"></i> 记录生产
                    </button>
                    <button class="btn btn-warning" onclick="showAddRejectionModal()">
                        <i class="fas fa-exclamation-triangle"></i> 记录不合格
                    </button>
                    <button class="btn btn-info" onclick="showTimeRangeModal()">
                        <i class="fas fa-clock"></i> 时间查询
                    </button>
                    <button class="btn btn-primary" onclick="exportRecords()">
                        <i class="fas fa-download"></i> 导出
                    </button>
                </div>
            </div>

            <!-- 搜索和筛选 -->
            <div class="search-bar">
                <div class="search-group">
                    <input type="text" id="recordSearch" placeholder="搜索工单编码或操作员..." class="form-control">
                    <button class="btn btn-secondary" onclick="searchRecords()">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
                <select id="recordTypeFilter" class="form-control">
                    <option value="">所有类型</option>
                    <option value="PRODUCTION">生产</option>
                    <option value="REJECTION">不合格</option>
                    <option value="REWORK">返工</option>
                </select>
                <select id="workstationFilter" class="form-control">
                    <option value="">所有工作站</option>
                    <option value="工作站A1">工作站A1</option>
                    <option value="工作站B1">工作站B1</option>
                    <option value="工作站C1">工作站C1</option>
                    <option value="工作站D1">工作站D1</option>
                </select>
                <select id="shiftFilter" class="form-control">
                    <option value="">所有班次</option>
                    <option value="白班">白班</option>
                    <option value="中班">中班</option>
                    <option value="夜班">夜班</option>
                </select>
                <select id="operatorFilter" class="form-control">
                    <option value="">所有操作员</option>
                    <!-- 操作员选项将动态加载 -->
                </select>
                <button class="btn btn-warning" onclick="clearFilters()">
                    <i class="fas fa-times"></i> 清除筛选
                </button>
            </div>

            <!-- 生产统计 -->
            <div class="production-stats">
                <div class="stat-card production">
                    <div class="stat-icon">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <div class="stat-info">
                        <h3 id="productionCount">0</h3>
                        <p>生产记录</p>
                        <small>今日: <span id="todayProduction">0</span></small>
                    </div>
                </div>
                <div class="stat-card rejection">
                    <div class="stat-icon">
                        <i class="fas fa-times-circle"></i>
                    </div>
                    <div class="stat-info">
                        <h3 id="rejectionCount">0</h3>
                        <p>不合格记录</p>
                        <small>今日: <span id="todayRejection">0</span></small>
                    </div>
                </div>
                <div class="stat-card efficiency">
                    <div class="stat-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <div class="stat-info">
                        <h3 id="efficiencyRate">0%</h3>
                        <p>合格率</p>
                        <small>本月平均</small>
                    </div>
                </div>
                <div class="stat-card total">
                    <div class="stat-icon">
                        <i class="fas fa-boxes"></i>
                    </div>
                    <div class="stat-info">
                        <h3 id="totalQuantity">0</h3>
                        <p>总产量</p>
                        <small>本月累计</small>
                    </div>
                </div>
            </div>

            <!-- 实时生产状态 -->
            <div class="realtime-status">
                <div class="card">
                    <div class="card-header">
                        <h3>实时生产状态</h3>
                        <button class="btn btn-sm btn-primary" onclick="refreshRealtimeStatus()">
                            <i class="fas fa-sync"></i> 刷新
                        </button>
                    </div>
                    <div class="card-body">
                        <div class="workstation-grid" id="workstationStatus">
                            <!-- 工作站状态将动态加载 -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- 生产记录表格 -->
            <div class="table-container">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" id="selectAll" onchange="toggleSelectAll()">
                            </th>
                            <th onclick="sortTable('workOrderCode')">
                                工单编码 <i class="fas fa-sort"></i>
                            </th>
                            <th onclick="sortTable('quantity')">
                                数量 <i class="fas fa-sort"></i>
                            </th>
                            <th onclick="sortTable('recordType')">
                                记录类型 <i class="fas fa-sort"></i>
                            </th>
                            <th onclick="sortTable('workstation')">
                                工作站 <i class="fas fa-sort"></i>
                            </th>
                            <th onclick="sortTable('operator')">
                                操作员 <i class="fas fa-sort"></i>
                            </th>
                            <th onclick="sortTable('shift')">
                                班次 <i class="fas fa-sort"></i>
                            </th>
                            <th>质量状态</th>
                            <th onclick="sortTable('createTime')">
                                记录时间 <i class="fas fa-sort"></i>
                            </th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="productionRecordsTableBody">
                        <tr>
                            <td colspan="11" class="loading">
                                <i class="fas fa-spinner fa-spin"></i>
                                加载中...
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 分页 -->
            <div class="pagination-container">
                <div class="pagination-info">
                    显示 <span id="pageStart">0</span> - <span id="pageEnd">0</span> 条，
                    共 <span id="totalItems">0</span> 条记录
                </div>
                <div class="pagination">
                    <button class="btn btn-sm btn-secondary" onclick="previousPage()" id="prevBtn">
                        <i class="fas fa-chevron-left"></i> 上一页
                    </button>
                    <span class="page-numbers" id="pageNumbers"></span>
                    <button class="btn btn-sm btn-secondary" onclick="nextPage()" id="nextBtn">
                        下一页 <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>
        </main>
    </div>

    <!-- 添加生产记录模态框 -->
    <div id="productionModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">记录生产数量</h3>
                <span class="close" onclick="hideProductionModal()">&times;</span>
            </div>
            <form id="productionForm">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form-label">工单 *</label>
                        <select class="form-control" name="workOrderId" required>
                            <option value="">请选择进行中的工单</option>
                            <!-- 工单选项将动态加载 -->
                        </select>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">生产数量 *</label>
                            <input type="number" class="form-control" name="quantity" min="1" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">工作站 *</label>
                            <select class="form-control" name="workstation" required>
                                <option value="">请选择工作站</option>
                                <option value="工作站A1">工作站A1</option>
                                <option value="工作站B1">工作站B1</option>
                                <option value="工作站C1">工作站C1</option>
                                <option value="工作站D1">工作站D1</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">操作员 *</label>
                            <input type="text" class="form-control" name="operator" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">班次 *</label>
                            <select class="form-control" name="shift" required>
                                <option value="">请选择班次</option>
                                <option value="白班">白班</option>
                                <option value="中班">中班</option>
                                <option value="夜班">夜班</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">备注</label>
                        <textarea class="form-control" name="remarks" rows="3" placeholder="生产备注..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="hideProductionModal()">取消</button>
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-save"></i> 记录生产
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 添加不合格记录模态框 -->
    <div id="rejectionModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">记录不合格数量</h3>
                <span class="close" onclick="hideRejectionModal()">&times;</span>
            </div>
            <form id="rejectionForm">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form-label">工单 *</label>
                        <select class="form-control" name="workOrderId" required>
                            <option value="">请选择进行中的工单</option>
                            <!-- 工单选项将动态加载 -->
                        </select>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">不合格数量 *</label>
                            <input type="number" class="form-control" name="quantity" min="1" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">工作站 *</label>
                            <select class="form-control" name="workstation" required>
                                <option value="">请选择工作站</option>
                                <option value="工作站A1">工作站A1</option>
                                <option value="工作站B1">工作站B1</option>
                                <option value="工作站C1">工作站C1</option>
                                <option value="工作站D1">工作站D1</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">操作员 *</label>
                            <input type="text" class="form-control" name="operator" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">班次 *</label>
                            <select class="form-control" name="shift" required>
                                <option value="">请选择班次</option>
                                <option value="白班">白班</option>
                                <option value="中班">中班</option>
                                <option value="夜班">夜班</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">质量状态 *</label>
                            <select class="form-control" name="qualityStatus" required>
                                <option value="">请选择不合格类型</option>
                                <option value="外观缺陷">外观缺陷</option>
                                <option value="尺寸不符">尺寸不符</option>
                                <option value="功能缺陷">功能缺陷</option>
                                <option value="材料缺陷">材料缺陷</option>
                                <option value="装配错误">装配错误</option>
                                <option value="其他">其他</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form-label">严重程度</label>
                            <select class="form-control" name="severity">
                                <option value="轻微">轻微</option>
                                <option value="一般">一般</option>
                                <option value="严重">严重</option>
                                <option value="致命">致命</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">详细备注 *</label>
                        <textarea class="form-control" name="remarks" rows="3" required placeholder="详细描述不合格原因和现象..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="hideRejectionModal()">取消</button>
                    <button type="submit" class="btn btn-warning">
                        <i class="fas fa-exclamation-triangle"></i> 记录不合格
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 时间范围查询模态框 -->
    <div id="timeRangeModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">时间范围查询</h3>
                <span class="close" onclick="hideTimeRangeModal()">&times;</span>
            </div>
            <form id="timeRangeForm">
                <div class="modal-body">
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">开始时间 *</label>
                            <input type="datetime-local" class="form-control" name="startTime" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">结束时间 *</label>
                            <input type="datetime-local" class="form-control" name="endTime" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">快速选择</label>
                        <div class="quick-time-buttons">
                            <button type="button" class="btn btn-sm btn-secondary" onclick="setQuickTime(1)">今天</button>
                            <button type="button" class="btn btn-sm btn-secondary" onclick="setQuickTime(7)">最近7天</button>
                            <button type="button" class="btn btn-sm btn-secondary" onclick="setQuickTime(30)">最近30天</button>
                            <button type="button" class="btn btn-sm btn-secondary" onclick="setQuickTime(90)">最近90天</button>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="hideTimeRangeModal()">取消</button>
                    <button type="submit" class="btn btn-info">
                        <i class="fas fa-search"></i> 查询
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 记录详情模态框 -->
    <div id="recordDetailModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">生产记录详情</h3>
                <span class="close" onclick="hideDetailModal()">&times;</span>
            </div>
            <div class="modal-body" id="recordDetailContent">
                <!-- 记录详情内容将在这里动态加载 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="hideDetailModal()">关闭</button>
            </div>
        </div>
    </div>

    <!-- Toast Notification -->
    <div id="toast" class="toast"></div>

    <script src="js/production-records.js"></script>
</body>
</html>